<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
    <div class="page">
      <van-nav-bar title="申请记录" left-arrow @click-left="$router.go(-1)"/>
      <van-tabs v-model="page.applyStatus" @change="searchFunc" color="#517df1" title-active-color="#517df1" title-inactive-color="#9d9d9d">
        <van-tab v-for="(item, index) in nav" :key="index" :name="item.value">
          <template #title> 
            <div style="font-size: 14px; text-align: center;">{{ item.label }}</div>
          </template>
        </van-tab>
      </van-tabs>
      <div class="page-content" style="margin-top: 0.27rem; background: #fff;">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
            <div class="flex-row">
              <span class="font-black" style="font-size: 14px;">时间：{{ item.createTime }}</span>
            </div>
            <span v-if="item.applyStatus == 0" class="font-blue" style="font-size: 14px;">取消申请</span>
          </div>
          <div class="list-group justify">
            <div class="list-row">
              <span class="label-text">机柜数</span>
              <span>{{ item.equipmentNum }}</span>
            </div>
            <div class="list-row">
              <span class="label-text">充电宝数</span>
              <span>{{ item.chargerNum }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      show: true,

      nav: [
        { label: '待出库', value: 0 },
        { label: '已出库', value: 1 }
      ],

      page: {
        applyStatus: 0,
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },

      list: []
    };
  },
  methods: {
    searchFunc() {
      this.page = { ...this.page, page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let { page, size, applyStatus } = sPage;
      this.page.loading = true;
      this.$axios.get('/api/bjk/applyList', {
        page, size, applyStatus
      }).then(res => {
        if(applyStatus != this.page.applyStatus) return ;
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(err => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    }
  },
  mounted() { 
    this.searchFunc();
  }
};
</script>

<style lang="less">
</style>
